<template>
  <div :class="typeLength"
       class="sort-search">
    <div v-for="(item, index) in typeList"
          :key="index"
         class="sort-search-item"
         :class="item.active ? 'active': ''"
         @click="handleClickSort(item, index)">
      <span class="type-txt" :class="item.prop=='listStyle'?'style':''" :id="item.prop=='listStyle' && listStyle?'style2':''">{{ item.label }}
        <div class="sort-icon"
             v-if="item.sort !== 'none'">
          <div class="icon up"
               :class="item.sort == 'ascending' ? 'selected': ''">
            <!-- <svg-icon class="rotate180"
                      icon-class="icon_triangle" /> -->
          </div>
          <div class="icon down"
               :class="item.sort == 'descending' ? 'selected': ''">
            <!-- <svg-icon icon-class="icon_triangle" /> -->
          </div>
        </div>
      </span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
/**
 * @Author: yqe@360shop.cn
 * @Date: 2019-10-26 18:48:09
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-07-13 16:48:36
 */
export default Vue.extend({
  props: {
    typeList: {
      type: Array,
      default: () => {
        const array = [
          { label: '默认', active: false, type: 0, prop: 'default', sort: 'none' },
          { label: '价格', active: false, type: 1, prop: 'price', sort: '' },
          { label: '销量', active: false, type: 2, prop: 'sales', sort: '' },
          { label: '新品', active: false, type: 3, prop: 'new', sort: '' }
        ]
        return array
      }
    },
    listStyle: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    typeLength() {
      const len = this.typeList.length
      return `type-len-${len}`
    }
  },
  name: 'index',
  data() {
    return {
    }
  },
  methods: {
    /**
     * 排序搜索
     * @param sort: ascending 升序/ descending 降序
     * @param prop: 类型
     */
    handleClickSort(param, index) {
      // console.log(param)
      const indexNum = this.indexNum
      if (param.prop == 'listStyle') {
        this.$emit('item', param)
        return false
      }
      if (indexNum == index) {
        if (param.prop !== 'default') {
          if (param.sort === 'ascending') {
            this.$set(this.typeList[index], 'sort', 'descending')
            this.$set(this.typeList[index], 'active', true)
          } else if (param.sort === 'descending') { // 重置为默认
            // this.$set(this.typeList[index], 'sort', '')
            // this.$set(this.typeList[index], 'active', false)

            this.$set(this.typeList[index], 'sort', 'ascending')
            this.$set(this.typeList[index], 'active', true)
          } else if (param.sort === '') {
            this.$set(this.typeList[index], 'sort', 'ascending')
            this.$set(this.typeList[index], 'active', true)
          }
        }
      } else {
        const typeList = this.typeList
        typeList.forEach((item, num) => {
          this.$set(this.typeList[num], 'active', false)
          if(this.typeList[num].sort!='none'){
            this.$set(this.typeList[num], 'sort', '')
          }
        })
        this.$set(this.typeList[index], 'active', true)
        if (param.prop !== 'default') {
          if (param.type == 2 || param.type == 3) {
            this.$set(this.typeList[index], 'sort', 'descending')
          } else {
            this.$set(this.typeList[index], 'sort', 'ascending')
          }
        }
      }
      this.indexNum = index
      this.$emit('item', param)
      // console.log(param.sort, 'sort类型', param.prop)
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin.scss";
@import "src/styles/variables";
.sort-search {
  font-size: 0;
  padding: 20px 0 16px;
  @for $i from 1 through 5 {
    &.type-len-#{$i} {
      .sort-search-item {
        width: percentage(1 / $i);
      }
    }
  }

  &-item {
    display: inline-block;
    font-size: 24px;
    text-align: center;
    color: #666;
    &.active {
      color: #F20E25;
      font-weight: bold;
      .icon.selected {
        color: #F20E25;
        font-weight: bold;
        // .up, .down {
        //   color: #F20E25;
        //   border-color: #F20E25;
        //   font-weight: bold;
        // }
      }
    }
    .type-txt {
      position: relative;
      display: inline-block;
      width: 130px;
      line-height:1.5;
      @include showEllipsis;
      // vertical-align: -1px;
      &.style{
        display:inline-block;
        width:32px;
        height:32px;
        vertical-align: -2px;
        background:url(https://img.wifenxiao.com/h5-wfx/images/item/list/style1.png) no-repeat;
        background-size:100%;
      }
      &#style2{
        background:url(https://img.wifenxiao.com/h5-wfx/images/item/list/style2.png) no-repeat;
        background-size:100%;
      }
    }
    .sort-icon {
      display: inline-block;
      margin-left:2px;
      // vertical-align: 2px;
      /* .icon {
        // TODO 加important避免copyright计算影响 暂时这么解决
        min-height: 16px!important;
        height: 16px;
        // display: inline-block;
        color: #666;
        font-size: 10px;
        &.miniprogram{
          height: initial;
        }
        &:first-child {
          margin-bottom: -2px;
        }
        .up, .down {
          border: solid #4d4d4d;
          border-width: 0 3px 3px 0;
          display: inline-block;
          padding: 4px;
        }
        .up {
          transform: rotate(-135deg);
          -webkit-transform: rotate(-135deg);
        }
        .down {
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
        }
      } */
      .icon{
        width:12px;
        height:6px;
        background:url(https://img.wifenxiao.com/h5-wfx/images/public/sort_up.png) no-repeat;
        background-size:100% 100%;
        &.up{
          &.selected{
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/public/sort_up2.png);
          }
        }
        &.down{
          margin-top:4px;
          background-image:url(https://img.wifenxiao.com/h5-wfx/images/public/sort_down.png);
          &.selected{
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/public/sort_down2.png);
          }
        }
      }
    }
  }
}
</style>
